<template>
    <div class="feedback-container">
      <el-card class="feedback-card" shadow="hover">
        <!-- 标题部分 -->
        <div class="feedback-title">意见反馈</div>
  
        <!-- 表单 -->
        <el-form
          ref="feedbackForm"
          :model="feedbackData"
          :rules="rules"
          label-width="0"
          class="feedback-form"
        >
          <!-- 反馈类型 -->
          <el-form-item prop="type">
            <el-select v-model="feedbackData.type" placeholder="请选择反馈类型" class="feedback-select">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
  
          <!-- 反馈内容 -->
          <el-form-item prop="content">
            <el-input
              type="textarea"
              v-model="feedbackData.content"
              placeholder="请输入您的反馈内容"
              rows="5"
              class="feedback-textarea"
            />
          </el-form-item>
  
          <!-- 联系方式 -->
          <el-form-item prop="contact">
            <el-input
              v-model="feedbackData.contact"
              placeholder="请输入您的联系方式（邮箱或手机号）"
              class="feedback-input"
            />
          </el-form-item>
  
          <!-- 提交与重置按钮 -->
          <el-form-item class="feedback-btn-group">
            <el-button type="primary" @click="handleSubmit" class="btn-submit">提交</el-button>
            <el-button @click="handleReset" class="btn-reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
  import {StatusType, type Suggestion} from '@/api/suggestion/suggestionTable'
  import { addSuggestionApi } from '@/api/suggestion'
  import {useUserStore} from '@/store/islogin/index'
  const useUser = useUserStore()
  

  
  const typeOptions = [
    { label: '问题反馈', value: 'Bug' },
    { label: '功能建议', value: 'Feature' },
    { label: '内容问题', value: 'Content' },
    { label: '其他', value: 'other' }

  ]
  
  const feedbackData = reactive<Suggestion>({
    type: '',
    content: '',
    contact: '',
    fbId: '',
    userId: '',
    submitTime: '',
    adminId: '',
    replyContent: '',
    handleTime: '',
    status: StatusType.Prohibit
  })
  
  const feedbackForm = ref<FormInstance>()
  
  const rules = reactive<FormRules>({
    type: [{ required: true, message: '请选择反馈类型', trigger: 'change' }],
    content: [{ required: true, message: '请输入反馈内容', trigger: 'blur' }],
    contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
  })

  const handleSubmit = () => {
    if (!feedbackForm.value) return
    feedbackForm.value.validate(async (valid) => {
      if (valid) {
        if (useUser.user) {
          feedbackData.userId=useUser.user.userId
          const res = await addSuggestionApi(feedbackData)
          if (res.code == 200) {
            ElMessage.success(res.msg)
          }
        }
      } else {
        ElMessage.error('请填写完整信息后再提交！')
      }
    })
  }
  
  const handleReset = () => {
    feedbackForm.value?.resetFields()
  }
  </script>
  
  <style scoped>
  /* 整体背景 */
  .feedback-container {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    box-sizing: border-box;
  }
  
  /* 卡片样式 */
  .feedback-card {
    width: 420px;
    border-radius: 12px;
    padding: 20px;
  }
  
  /* 标题 */
  .feedback-title {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: #333;
    margin-bottom: 20px;
  }
  
  /* 表单整体 */
  .feedback-form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
  }
  
  /* 下拉选择框、文本域、输入框 */
  .feedback-select,
  .feedback-textarea,
  .feedback-input {
    width: 100%;
  }
  
  /* 按钮组 */
  .feedback-btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  
  /* 提交按钮 */
  .btn-submit {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
  }
  
  /* 重置按钮 */
  .btn-reset {
    background-color: #f0f2f5;
    border-color: #dcdfe6;
    color: #606266;
  }
  
  /* 鼠标悬停效果 */
  .btn-submit:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
  }
  
  .btn-reset:hover {
    background-color: #e6e9ed;
  }
  </style>
  